<template>
    <div>
        <!-- 搜索版块 -->
        <div class="search_box">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="角色">
                    <el-input placeholder="角色" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-sousuo3"></use>
                        </svg>
                        查询</el-button>
                    <el-button type="primary">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-a-6gengxin"></use>
                        </svg>
                        重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="list_box">
            <div class="list_box_but">
                <el-button type="primary">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiahao1"></use>
                    </svg>
                    新增角色</el-button>
            </div>
            <div class="list_table">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="true">
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="name" label="角色ID" width="120" />
                    <el-table-column property="address" label="角色名称" show-overflow-tooltip />
                    <el-table-column label="Date" width="120">
                        <template #default="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column align="center" label="按钮组">
                        <el-button class="table-button">
                            <svg class="icon inner_icon" aria-hidden="true">
                                <use xlink:href="#icon-wangluo-"></use>
                            </svg>
                            授权</el-button>
                        <el-button class="table-button">
                            <svg class="icon inner_icon" aria-hidden="true">
                                <use xlink:href="#icon-bianji4"></use>
                            </svg>
                            变更</el-button>
                        <el-button>
                            <svg class="icon inner_icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu5"></use>
                            </svg>
                            删除</el-button>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="list_pagination">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="100" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <!-- 内容版块 -->
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const currentPage = ref(4);
const disabled = ref(false);
const pageSize = ref(10);
const small = ref(false);
const background = ref(true);
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
};
const tableData: any = [
    {
        date: "2016-05-03",
        name: 1,
        address: "超级管理员",
    },
    {
        date: "2016-05-02",
        name: 2,
        address: "管理员",
    },
    {
        date: "2016-05-04",
        name: 3,
        address: "游客",
    },
    {
        date: "2016-05-01",
        name: 4,
        address: "经理",
    },
    {
        date: "2016-05-08",
        name: 5,
        address: "主管",
    },
    {
        date: "2016-05-06",
        name: 6,
        address: "总监",
    },
];
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    margin-right: 4px;
}

.inner_icon {
    fill: #4d70ff;
    margin-right: 2px;
}

.inner_icon:hover {
    fill: #2d56fa;
}
</style>
